<template>
  <div class="purchaseOrderDetails">
    <div class="purchaseOrderDetails-content">
      <div ref="descriptionsRef" class="purchaseOrderDetails-content-bbiosm">
        <a-row class="grid-demo" :gutter="24">
          <a-col :span="24">
            <div class="purchaseOrderDetails-content-bbiosm-piooom">
              <a-descriptions title="采购基础信息" :column="{ xs: 2, sm: 3, md: 4, lg: 5 }">
                <a-descriptions-item v-for="(item, index) of sendWorkTabel" :key="index" :label="item.label" :span="item.span ?? 1">
                  <a-tag v-if="item.value">{{ item.value }}</a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="purchaseOrderDetails-content-bbiosm" :style="{ height: tableHeight }">
        <vxe-table
          :data="bottomTabel"
          size="mini"
          show-footer
          height="100%"
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          stripe
          border
        >
          <!-- <vxe-column field="purchaseType" title="单别" width="80" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchaseType }}</template>
          </vxe-column>
          <vxe-column field="purchaseId" title="单号" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchaseId }}</template>
          </vxe-column> -->
          <vxe-column field="serialId" title="序号" width="80" show-overflow align="center">
            <template #default="{ row }"> {{ row.serialId }}</template>
          </vxe-column>
          <vxe-column field="productId" title="品号" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.productId }}</template>
          </vxe-column>
          <vxe-column field="productName" title="品名" width="200" align="center">
            <template #default="{ row }"> {{ row.productName }}</template>
          </vxe-column>
          <vxe-column field="specification" title="规格" width="180" show-overflow align="center">
            <template #default="{ row }"> {{ row.specification }}</template>
          </vxe-column>
          <vxe-column field="purchasePrice" title="采购单价" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchasePrice }}</template>
          </vxe-column>
          <vxe-column field="purchaseNumber" title="采购数量" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchaseNumber }}</template>
          </vxe-column>
          <vxe-column field="tax" title="税额" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.tax }}</template>
          </vxe-column>

          <vxe-column field="taxRate" title="税率" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.taxRate * 100 }}%</template>
          </vxe-column>

          <vxe-column field="unit" title="单位" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.unit }}</template>
          </vxe-column>

          <vxe-column field="purchaseAmount" title="总金额" width="120" show-overflow align="center">
            <template #default="{ row }"> {{ row.purchaseAmount }}</template>
          </vxe-column>

          <vxe-column field="remark" title="备注" width="220" show-overflow align="center">
            <template #default="{ row }"> {{ row.remark }}</template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>

    <div v-if="from == 'purchase'" class="purchaseOrderDetails-bottom">
      <a-button class="purchaseOrderDetails-bottom-btn" @click="escalation">上报</a-button>
    </div>

    <div v-else-if="from == 'task'" class="purchaseOrderDetails-bottom">
      <a-space>
        <a-button class="purchaseOrderDetails-bottom-btn" @click="agree">同意</a-button>
        <a-button @click="disagree">不同意</a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs } from '@vueuse/core';
import importConfig from './purchaseOrderDetails';
export default {
  setup() {
    const { init, base, escalation, agree, disagree } = importConfig();
    init();
    return {
      ...toRefs(base),
      escalation,
      agree,
      disagree,
    };
  },
};
</script>

<style lang="less" scoped>
.purchaseOrderDetails {
  position: relative;
  background: white;
  height: calc(100vh - 136px);
  box-sizing: border-box;

  &-content {
    height: calc(100vh - 186px);
    overflow: hidden;

    &-bbiosm {
      padding: 10px;
      &-piooom {
      }
    }
  }

  &-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    width: 100%;
    box-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.3);

    &-btn,
    &-btn:hover {
      background-color: #409eff;
      color: white;
    }

    :deep(.arco-btn) {
      width: 100px;
    }
  }
}
</style>
